import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import reportWebVitals from './reportWebVitals';
import mockData from './data.json';
// 哈希模式
// import {hashRouter as Router,Link,Route} from 'react-router-dom';
// history模式
import {BrowserRouter as Router,Link,Route,Redirect,Switch} from 'react-router-dom';

// JSX语法学习
let root = document.getElementById('root');
let h1 =<h1>this is the title 0f  h1<span><span>111</span></span></h1>
// console.log(mockData)
//1.React路由：
// 根据不同的路径显示不同的组件（内容），react使用库组件react-router-dom
// 安装：cnpm isntall react-router-dom --save
// React_router三大组件：
// Router：是所有路由的根组件（底层组件），包裹所有路由规则的最外层容器
          // 属性：basename>设置此路由根路径，router可以在一个组件中写多个
  // Route:路由规则匹配组件，显示当前规则对应的组件
  // Link：路由跳转的组件

  // 注意：如果要精确匹配，那么可以在route上设置exact属性

  // 2.重定向组件和switch组件
// 重定向组件：如果访问一个组件有重定向组件时就会改变他的路径，是页面呈现的内容成为重定向路径的内容

// 3.swtich路由
// 让switch组件内容的route只匹配1个，只要匹配到了，剩余的路由规则就不再匹配了


  // 定义几个简单的页面路由
  function Index(props) { 
    return (
      <div>
        <h1>欢迎来到首页！222</h1>
      </div>
    )
   };
   function Me(props) { 
     console.log('Me组件中的props=》',props)
     return (
       <div>
         <h1>个人中心222</h1>
       </div>
     )
    };
    function News(props) { 
      console.log('News组件中的props=》',props,props.match.params.id);
      return (
        <div>
          <h1>新闻页面222</h1>
          <mark>传过来的新闻id是{props.match.params.id}</mark>
        </div>
      )
     };
     let Form =(props)=>{
       let formObj ={
         pathname:'/login',
         state:{
           isLogin:false
         }
       }
        return (
          <div>
            <h1>这里是Form组件</h1>
            <Link to={formObj}>进入Login组件</Link>
          </div>
        )
     };
     let Login =(props)=>{
      console.log('Login组件的props=》',props);
      if(props.location.state.isLogin){
       return (
          <div>
            <h1>这里是Login件</h1>
            <Redirect to='/admin'></Redirect>
          </div>
        )
      }else{
        return (
          <div>
            <h1>这里是Login件</h1>
            <Redirect to='/loginfail'></Redirect>
          </div>
        )     
      }
    };
    let Admin =(props)=>{
      return (
        <div>
          <h1>这里是Admin件-欢迎登陆</h1>
        </div>
      )
   };
   let loginFail =(props)=>{
    return (
      <div>
        <h1>您好，请先进行登陆</h1>
      </div>
    )
 };
    function Product(props) { 
      return (

          <Router>
              <div>
                 <Link to='/admin'>首页</Link> <br/>
                 <Link to='/admin/user'>个人中心</Link> <br/>
                 <Link to='/admin/product'>产品中心</Link> <br/>
               </div>
            <Route path='/admin/' exact component={Index}> </Route>
            <Route path='/admin/user' exact component={Me}> </Route>
            <Route path='/admin/product'  component={()=>(<div>产品页面</div>)}> </Route>
          </Router>
      )
     };
     class TestCom extends React.Component{
       constructor(props){
         super(props);
       };
       render(){
         return (
           <div>
             <div>所有页面的普通内容</div>
             {/* 路由 */}
             {/* <Router>
               <Route path='/'  exact component={()=>(<div>首页</div>)}></Route>
               <Route path='/me' component={()=>(<div>个人中心</div>)}></Route>
               <Route path='/product' component={()=>(<div>产品页面</div>)}></Route>
             </Router> */}

             {/* <Router basename='/admin'>
               <div>
                 <Link to='/'>首页</Link>
                 <Link to='/me'>个人中心</Link>
                 <Link to='/product'>产品中心</Link>
               </div>
               <Route path='/'  exact component={Index}></Route>
               <Route path='/me' component={Me}></Route>
               <Route path='/product' component={Product}></Route>
             </Router> */}

             {/* <Product></Product> */}
           </div>
         )
       }
     }

     //动态路由
     class TestCom2 extends React.Component{
      constructor(props){
        super(props);
      };
      render(){
        let meObj ={
          pathname:'/me',//跳转的路径
          search:'?name=zhangsan&age=99',//get请求的参数
          hash:'#abc',//设置的hash值
          state:{msg:'helloword!'}//传入组件的数据
        }
        return (
          <div>
            <div>所有页面的普通内容TestCom2</div>
            {/* 路由 */}
            {/* 值得注意的是：路由可以设置to属性来进行页面跳转，to属性也可以写路径的字符串，也可以通过一个对象机进行设置 */}
             <Router basename='/admin'>
               <div>
                 <Link to='/'>首页</Link> <br/>
                 {/* 路由传参数 */}
                 <Link to={meObj} replace>个人中心</Link> <br/>
                 <Link to='/product'>产品中心</Link> <br/>
                 {/* 动态路由 */}
                 <Link to='/news/123456'>新闻页--动态</Link> <br/>
               </div>
               <Route path='/'  exact component={Index}></Route>
               <Route path='/me' component={Me}></Route>
               <Route path='/product' component={Product}></Route>
               <Route path='/news/:id' component={News}></Route>
               {/* 路由重定向 */}
               <Route path='/form' component={Form}></Route>
               <Route path='/login' component={Login}></Route>
               <Route path='/admin' component={Admin}></Route>
               <Route path='/loginfail' component={loginFail}></Route>
             </Router>

          </div>
        )
      }
    }



    //Switch组件
    class TestCom3 extends React.Component{
      constructor(props){
        super(props);
      };
      render(){
        return (
          <div>
            <div>所有页面的普通内容TestCom3</div>
            {/* 路由 */}
             <Router basename='/admin'>
                <Switch>
                    <Route path='/abc'  exact component={()=>(<h4>abc1页</h4>)}></Route>
                    <Route path='/abc' component={()=>(<h4>abc2页</h4>)}></Route>
                    <Route path='/child' component={ChildrenTest}></Route>
                    <Route path='/a'  exact component={(props)=>{console.log('查看从ChildrenTest传过来的数据:',props.location.state.msg);return '首页'}}></Route>
                </Switch>
             </Router>

          </div>
        )
      }
    };
    class ChildrenTest extends React.Component{
      constructor(props){
        super(props);
        this.clickEvent=this.clickEvent.bind(this);
      };
      clickEvent(){
        console.log('clickEvent事件被触发=》',this.props);
        this.props.history.push('/a',{msg:'这是由ChildrenTest传递给首页的数据1'});
        // this.props.history.replace('/',{mag:'这是由ChildrenTest传递给首页的数据2'});
        //前进
        // this.props.history.go(1);
        // this.props.history.goForward();
        // 后退
        // this.props.history.go(-1);
        // this.props.history.goBack();s

      };
      render(){
        return (
          <div>
            <h5>当前是ChildrenTest组件页</h5>
            <button onClick={this.clickEvent}>跳回首页</button>
          </div>
        )
      }

    }
ReactDOM.render(
 <TestCom3></TestCom3>,
  root
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
